body {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: aliceblue;
  gap: 10px;
  padding: 50px;
}

.wrap {
  display: flex;
  gap: 10px;
}
.wrap .d {
  width: 100px;
  height: 100px;
  outline: 1px dashed;
  overflow: hidden;
}
.wrap .d.d1 {
  background: conic-gradient(from -45deg, royalblue 90deg, transparent 0deg);
}
.wrap .d.d2-1 {
  background: conic-gradient(from 30deg at 0 50%, transparent 120deg, royalblue 0deg), conic-gradient(from 30deg, royalblue 120deg, transparent 0deg);
  background-size: 40px 60px;
  background-position: 20px 50%, -20px 50%;
  background-repeat: repeat-x;
}
.wrap .d.d2 {
  background: conic-gradient(from 30deg at 0 50%, transparent 120deg, royalblue 0deg), conic-gradient(from 30deg, royalblue 120deg, transparent 0deg);
  background-size: 40px 60px;
  background-position: 20px 50%, -20px 50%;
}
.wrap .d.d3 {
  background: conic-gradient(royalblue 90deg, transparent 0deg);
}
.wrap .d.d4-1 {
  background: conic-gradient(from -90deg at 20px 20px, royalblue 90deg, transparent 0deg);
  background-size: calc(100% - 20px) calc(100% - 20px);
}
.wrap .d.d4 {
  background: conic-gradient(royalblue 90deg, transparent 0deg 180deg, royalblue 180deg 270deg, transparent 0deg);
  background-size: 20px 20px;
}
.wrap .d.d5 {
  background: conic-gradient(from -90deg at 10px 4px, royalblue 90deg, transparent 0deg);
  background-size: 30px 30px;
}
.wrap .d.d6 {
  background: conic-gradient(from -90deg at 10px 4px, royalblue 90deg, transparent 0deg), conic-gradient(from -90deg at 4px 10px, royalblue 90deg, transparent 0deg);
  background-size: 30px 30px;
  background-position: 0 3px, 3px 0;
}
.wrap .d.d7 {
  background: conic-gradient(from -90deg at 20px 8px, royalblue 90deg, transparent 0deg), conic-gradient(from -90deg at 8px 20px, royalblue 90deg, transparent 0deg);
  background-position: -10px -4px, -4px -10px;
}
.wrap .d.d8 {
  background: conic-gradient(from -45deg at 10px 10px, royalblue 90deg, transparent 0deg), conic-gradient(from 135deg at left 10px bottom 10px, royalblue 90deg, transparent 0deg);
  background-position: -10px 0;
}